"use strict";
const { PureComponent } = require('react');
import * as React from 'react';
import { dynamicStyles } from "../assets/styles/community";
import MyText from "./MyText";
import { commonStyles } from "../assets/styles/common";
import MyIcon from "./icon";
import Line from "./Line";
import { SCREEN_WIDTH } from "../constant";
import Avatar from "./Avatar";
import Request from "../utils/Request";
import MyImage from "./MyImage";
const { Actions } = require("react-native-router-flux");
const { CachedImage, ImageCache } = require('react-native-img-cache');
const { View, Image, TouchableOpacity } = require('react-native');
const { connect } = require('react-redux');
const { ActionSheet } = require('antd-mobile');
class DynamicItem extends PureComponent {
    constructor() {
        super(...arguments);
        this.state = {
            imageWidth: SCREEN_WIDTH,
            imageHeight: 20
        };
        this.operationPress = () => {
            let options = ['静音通知', '举报', '取消',];
            const item = this.props.item;
            const auth = this.props.auth;
            if (item.user.id === auth.userInfo.id) {
                options = ['静音通知', '删除', '取消',];
            }
            ActionSheet.showActionSheetWithOptions({
                options,
                cancelButtonIndex: options.indexOf('取消'),
                destructiveButtonIndex: options.indexOf('删除'),
                maskClosable: true,
            }, (buttonIndex) => {
                if (options[buttonIndex] === '删除') {
                    this.props.dispatch({
                        type: 'post/deletePost',
                        payload: {
                            post: item
                        }
                    });
                }
            });
        };
        this.likePress = () => {
            if (this.props.onLikePress) {
                this.props.onLikePress(this.props.item);
            }
        };
        this.commentPress = () => {
            if (this.props.onCommentPress) {
                this.props.onCommentPress();
            }
        };
        this.translatePress = () => {
        };
        this.userInfoPress = () => {
            if (this.props.onUserInfoPress) {
                this.props.onUserInfoPress();
            }
        };
        this.onContentPress = () => {
            this.props.onContentPress && this.props.onContentPress(this.props.item);
        };
        this.onLoad = (e) => {
            if (e.nativeEvent.source) {
                this.setState({
                    imageWidth: SCREEN_WIDTH,
                    imageHeight: e.nativeEvent.source.height / e.nativeEvent.source.width * SCREEN_WIDTH
                });
            }
            else {
                this.setState({
                    imageWidth: SCREEN_WIDTH,
                    imageHeight: 0
                });
            }
        };
        this.onAvatarPress = (user) => {
            if (this.props.onAvatarPress) {
                this.props.onAvatarPress(user);
            }
            else {
                Actions.userProfile({ userInfo: user });
            }
        };
        this.onUserInfoPress = (company) => {
            this.props.onUserInfoPress && this.props.onUserInfoPress(company);
        };
        this.getPraiseCount = () => {
            if (!this.props.item.praise)
                return 0;
            return this.props.item.praise.counts;
        };
        this.getPraiseFlag = () => {
            let flag = false;
            if (this.props.item.praise) {
                if (Array.isArray(this.props.item.praise.praiseDTOList)) {
                    this.props.item.praise.praiseDTOList.map((item) => {
                        if (item.userId === this.props.auth.userInfo.id) {
                            flag = true;
                        }
                    });
                }
            }
            return flag;
        };
        this.getCommentsCount = () => {
            if (!this.props.item.comments)
                return 0;
            if (!Array.isArray(this.props.item.comments))
                return 0;
            return this.props.item.comments.length;
        };
        this.renderImages = () => {
            const { item } = this.props;
            if (!item || (!item.pic))
                return null;
            return (<View style={{ width: this.state.imageWidth, height: this.state.imageHeight, backgroundColor: 'transparent' }}>
                <MyImage source={{ uri: Request.checkImageUrl(item.pic) }} onLoad={this.onLoad} style={{
                width: this.state.imageWidth,
                height: this.state.imageHeight,
                backgroundColor: 'transparent'
            }}/>

            </View>);
        };
        this.renderContent = (content = null) => {
            if (!content)
                return null;
            return (<View style={dynamicStyles.contentContainer}>
                <MyText style={dynamicStyles.content} numberOfLines={10}>{content}</MyText>
                <TouchableOpacity onPress={this.translatePress}>
                    <MyText style={dynamicStyles.translate}>查看翻译</MyText>
                </TouchableOpacity>

            </View>);
        };
    }
    render() {
        if (!this.props.item) {
            return null;
        }
        const { item } = this.props;
        const user = item.user;
        return (<View style={[dynamicStyles.item, { padding: 0 }]}>
                <View style={[commonStyles.flexRow, dynamicStyles.userInfo, { padding: 10 }]}>
                    <Avatar source={{ uri: user.avatar }} borderWidth={5} borderColor='rgb(224,224,224)' size={60} onPress={this.onAvatarPress.bind(null, this.props.item.user)}/>
                    <TouchableOpacity style={dynamicStyles.userInfoTextInfo} onPress={this.onUserInfoPress.bind(this, user.company)}>
                        <MyText style={dynamicStyles.name}>{user.nickName}</MyText>
                        <MyText style={dynamicStyles.company}>{user.company.name}</MyText>
                        <MyText style={dynamicStyles.time}>{item.created}</MyText>
                        <TouchableOpacity onPress={this.operationPress} style={[commonStyles.centerVH, dynamicStyles.more, { width: 30, height: 30 }]}>
                            <MyIcon name='icon-xiangxia' color='#B3B3B3' size={12}/>
                        </TouchableOpacity>

                    </TouchableOpacity>
                </View>
                <TouchableOpacity onPress={this.onContentPress}>
                    {this.renderContent(item.content)}
                    {this.renderImages()}
                </TouchableOpacity>

                <View style={[commonStyles.flexRow, commonStyles.relative, dynamicStyles.bottom]}>
                    <Line style={[commonStyles.absolute, { left: 10, top: 0 }]} width={SCREEN_WIDTH - 40}/>
                    <View style={commonStyles.flexRow}>
                        <TouchableOpacity onPress={this.likePress}>
                            <MyText style={[dynamicStyles.like, this.getPraiseFlag() ? dynamicStyles.isLiked : null]}>{`${this.getPraiseCount()}赞`}</MyText>
                        </TouchableOpacity>
                        <TouchableOpacity onPress={this.commentPress}>
                            <MyText style={dynamicStyles.comment}>{`${this.getCommentsCount()}评论`}</MyText>
                        </TouchableOpacity>

                    </View>
                    <View style={[commonStyles.flex1, commonStyles.flexEnd]}>
                        <MyText style={dynamicStyles.like}>{this.props.item.user ? this.props.item.user.nickName : ''}</MyText>
                    </View>
                </View>
            </View>);
    }
}
DynamicItem.defaultProps = {
    id: 0,
    name: '',
    avatar: '',
    company: '',
    time: '',
    content: '',
    like: 0,
    comment: 0,
    liked: false,
    images: null,
    onLikePress: null,
    onCommentPress: null,
    onUserInfoPress: null,
    onAvatarPress: null,
};
export default connect(({ auth }) => ({ auth }))(DynamicItem);
